<template>
	<view class="content">
		<view class="DisplayRack">
			<view class="exhibition">
				<view class="Rank">黄金展位</view>
				<view class="content_title">
					<image src="../../../../static/logo.png" mode=""></image>
					<view class="exhibition_rigth">
						<view class="Office">
							<view class="title">笔记本电脑</view>
							<view class="number">A101</view>
						</view>
						<text>文化办公</text>
					</view>
				</view>
			</view>
			<view class="bottom">
				<view @click="Message()"><text>更换展位</text></view>
				<view class='goods'><text>更换商品</text></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		methods:{
			Message(){
				uni.navigateTo({
					url:'../DisplaymMessage/DisplaymMessage'
				})
			}
		}
	}
</script>

<style lang="scss">
.content {
	height: 93.4vh;
	background: #f2f2f2;
	.DisplayRack {
		padding: 1upx 0;
		.exhibition {
			width: 710upx;
			height: 700upx;
			padding: 20upx 0;
			margin: 20upx auto;
			background: #ffffff;
			box-shadow: 0px 3px 30px 0px rgba(204, 204, 204, 0.32);
			border-radius: 40upx;
			.Rank {
				font-size: 28upx;
				color: #ffe6cb;
				background: #452603;
				padding: 12upx 24upx;
				border-radius: 0px  40upx 40upx 0 ;
				width: 120upx;
				margin: 10upx 0;
			}
			.ordinary {
				width: 120upx;
				font-size: 28upx;
				color: #f6f7ff;
				background: #6b6d7b;
				padding: 8upx 24upx;
				border-radius: 0px  40upx 40upx 0 ;
			}
			.content_title{
				margin: 5% 15%;
				image {
					width: 500upx;
					height: 420upx;
					border-radius: 20upx;
				}
				uni-text {
					font-size: 22upx;
					color: #e50012;
					padding: 12upx 14upx;
					background: #ffdfe8;
					border-radius: 10upx;
				}
				.exhibition_rigth {
					.title {
						font-size: 28upx;
						color: #333333;
						padding: 18upx 0;
					}
					.Office {
						display: flex;
						justify-content: space-between;
						width: 500upx;
					}
					.number {
						font-size: 32upx;
						color: #333333;
						padding: 18upx 0;
					}
			}
			}
		}
		.bottom{
			    display: flex;
			    justify-content: space-around;
			    margin-top: 300upx;
			uni-view{
				width: 280upx;
				height: 88upx;
				    border: 1px solid #535353;
				    border-radius: 88upx;
				    display: flex;
				    align-items: center;
				    justify-content: center;
					color: #333333;
			}
			.goods{
				background: #E50012;
				color:#ffffff;
				border: 1px solid #E50012;
			}
		}
	}
}
</style>
